<template>
    <div>
        <Drawer title="工序配置" :before-close="handleClose" :closable="false" v-model="drawerVisible" width="80%"
            class="drawerStyle">

            <div class="tableContent">
                <Button type="primary" @click="handleAddRow">新增</Button>
                <Table :data="processList" style="width: 100%">
                    <TableColumn prop="procedureName" label="工序名称"></TableColumn>
                    <TableColumn prop="description" label="描述"></TableColumn>
                    <TableColumn label="操作" width="220">
                        <template slot-scope="{ row }">
                            <Button type="text" @click="handleEditRow(row,true)">资源配置</Button>
                            <Button type="text" @click="handleEditRow(row)">编辑</Button>
                            <Button type="text" @click="handleDeleteRow(row)">删除</Button>
                        </template>
                    </TableColumn>
                </Table>
                <div class="pageWrap mt16">
                    <pageLeftTitle :total="processTotal" />
                    <Page :total="processTotal" :page-size="queryPage.pageSize" :current="queryPage.current"
                        @on-change="changePageNum" @on-page-size-change="changePageSize" show-sizer />
                </div>
            </div>
            <Drawer title="Two-level Drawer" :closable="false"
               class="drawerZIndex"
            v-model="modalVisibleProcess" :z-index=12000>
        This is two-level drawer.
    </Drawer>
        </Drawer>
        <commonModal ref="commonModal"></commonModal>
        <RouterModal :visible="modalVisible" :form="form" :title="title" :handleAddSubmit="handleAddSubmit" 
        :closeModal="closeModal"
        />
    </div>
</template>

<script>
import { Table, TableColumn, Button, Popconfirm } from 'element-ui';
import { editProcedureApi, addProcedureApi, deleteProcedureApi } from '@/api/dataBasic/processRoute';
import RouterModal from './components/routerModal';
import commonModal from '@/components/modalTypes/commonModal.vue';

export default {
    name: "DrawerProcess",
    components: {
        commonModal,

        Table,
        TableColumn,
        Button,
        RouterModal,
        Popconfirm
    },
    props: {
        drawerVisible: Boolean,
        drawerClose: Function,
        currentItem: Object,
        processList: Array,
        processTotal: Number,
        productProcess: Function,
    },
    data() {
        return {
            queryPage: { current: 1, pageSize: 10 },
            modalVisible: false,
            form: {},
            title: '',
            modalVisibleProcess: false,
        
        };
    },
    methods: {
        closeModal(){
            this.modalVisible=false
        },
        changePageNum(val) {
            this.queryPage.current = val;
            this.productProcess({
                processRouteId: this.currentItem.id,
                ...this.queryPage,
            })
        },

        changePageSize(val) {
            this.queryPage.pageSize = val;
            this.productProcess({
                processRouteId: this.currentItem.id,
                ...this.queryPage,
            })
        },
        handleAddSubmit() {
            const url = this.form.id ? editProcedureApi : addProcedureApi;
            const query = {
                ...this.form,
                processRouteId: this.currentItem.id,
            }
            url(query).then(res => {
                this.$Message.success(res.message);

                this.modalVisible = false;
                this.productProcess({
                    processRouteId: this.currentItem.id,
                    ...this.queryPage,
                })
            })
                .catch(error => {
                    console.error('Error submitting form:', error);

                });
        },
        handleClose(done) {
            this.drawerClose();

        },
        handleAddRow() {
            this.title = '新增工序';
            this.form = {};
            this.modalVisible = true
        },
        handleEditRow(row,flag) {
             if(flag){
                this.modalVisibleProcess=true;
                return
             }
            this.modalVisible = true;
            this.form = { ...row };
            this.title = '编辑工序';
        },
        handleDeleteRow(row) {
            this.$refs.commonModal.showModal({
                title: '删除提醒',
                type: 'warn',
                desc: '是否确认删除？',
                submit: () => {
                    deleteProcedureApi({ ids: [row.id] }).then(res => {
                        if (res.code === 200) {
                            this.$Message.success(res.message);
                            this.productProcess({
                                processRouteId: this.currentItem.id,
                                ...this.queryPage,
                            })
                        } else {
                            this.$Message.warning(res.message);
                        }
                    });

                },
            });

        }
    }
}
</script>

<style lang="scss" scoped>
.operationBtn {
    cursor: pointer;
    margin-right: 10px;
}

.tableContent {
    padding: 25px;
}


.drawerZIndex {
 ::v-deep.ivu-drawer-wrap{
    z-index: 12000 !important;
}
::v-deep.ivu-drawer-mask{
    z-index: 11000 !important;
}


}
</style>